웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
타입 선언을 위해서는 요새는 필수가 되어버린 타입스크립트(Typescript)에 대하여 알아보려고 합니다. 오늘은 타입스크립트의 클래스를 확장하는 방법 그리고 접근 제한자를 사용하는 방법 두 가지를 중점으로 알아볼께요!
1. 타입스크립트 클래스를 확장하기, extends
2. 타입스크립트 접근 제한자 사용 방법
먼저 클래스를 상속하여 사용하는 방법을 알아봅니다. 방법을 얘기하기에 앞서 클래스는 객체 지향 언어의 핵심인 부분 중 하나입니다. 클래스를 매번 새롭게 만들수도 있지만 이미 만들어진 클래스를 상속 받아 사용할 수 있습니다. 이 경우 상속 받은 클래스는 자식 클래스가 되고 상속한 클래스는 부모 클래스라고 부르게 되죠.
@ 클래스를 상속하는 이유는?
클래스를 상속 받으면 매 번 새로운 클래스를 선언하지 않아도 됩니다. 또한 클래스의 타입 선언 역시 부모 타입을 상속 받아 확장하여 사용할 수 있기 때문에 반복된 코드를 줄일 수 있으며 결국 코드의 재사용성이 올라가게 됩니다. 코드 자체가 간결해지면서 유지보수도 용이할 수 있습니다.
이제 상속의 이유를 알았으니 아래에서 직접 클래스를 하나 만들고 상속 받는 과정을 알아보겠습니다.
클래스를 상속하려면 extends 키워드를 사용합니다. extends는 상속을 통해 새로운 자식 클래스를 선언하는 방법입니다. 예를들어 아래와 같이 extends를 사용하면 기존의 클래스 Site를 상속받아 새로운 FavoriteSite 이름의 클래스를 생성할 수 있습니다.
이제 FavoriteSite는 부모 클래스 Site의 자식 클래스가 되었습니다. 상속을 통해 부모가 가진 모든 프로퍼티나 메소드를 사용할 수 있습니다.
궁금 1) 부모 클래스의 메서드의 오버라이딩(Overriding)이 가능할까?
참고로 자식 클래스는 상속 받은 부모 클래스의 메서드의 오버라이딩(Overriding)이 가능할까요? 당연히 가능합니다. 상속을 통해 전달 받은 메서드는 원한다면 다시 재정의할 수 있습니다.
궁금 2) 여러 개의 부모 클래스를 동시에 상속 받을 수 있을까?
결론부터 얘기하면 아닙니다! 즉, 클래스는 단 하나의 클래스만 상속 받아 사용할 수 있습니다. 동시에 여러 클래스를 상속할 수 없죠. 예를들어 만약 아래와 같이 Site와 Favorite 클래스 모두를 상속 받기 위해서 사용할 경우 에러가 발생하게 됩니다.
에러를 보니 클래스는 오직 하나의 단일 클래스 상속만 가능하다는 메시지를 보여줍니다.
다음은 클래스의 접근 제한자에 대하여 알아봅니다.
다음으로 클래스에서 접근 제한자를 사용하는 방법입니다. 접근제한자는 말 그대로 접근을 허용하거나 불허하는 기능을 얘기합니다. 클래스를 선언할 때 사용 목적에 따라 적절하게 접근을 제한하는 것이 가능하며 이를 통해 오류 발생이나 보안 문제 등을 피할 수 있습니다.
타입스크립트의 클래스는 다음과 같이 public, private, protected 세 가지의 접근제한자를 사용할 수 있으며 이는 ES 6의 클래스와의 큰 차이점입니다. 각각 다음과 같이 사용됩니다.
public // (기본값) 공개
private // 비공개로 자기 자신의 클래스 내부에서만 접근
protected // 자식 클래스까지만 접근 가능
따로 값을 지정하지 않고 클래스를 선언하는 경우 public인 기본값이 사용됩니다.
만약 비공개인 private 접근제한자를 상속받는 새로운 클래스를 만들어봅니다. 이때 id만 private으로 선언하고 나머지 color 프로퍼티는 public으로 선언합니다. 이 경우 아래와 같이 클래스 생성이 가능할 것입니다.
생성된 클래스 Site는 public인 color와 private인 id를 가지고 있습니다. 우리는 이미 접근제한자 private은 자기 자신의 내부에서만 접근 가능하다고 알고 있습니다. 만약 아래와 같이 WebisfreeSite 이름의 새로운 인스턴스를 생성한 후 아래와 같이 color와 id값에 접근하면 어떻게 될까요?
위와 같이 코드를 작성할 경우 color인 경우에는 잘 동작하지만 id 변수를 선언하는 과정에서 에러가 발생합니다. 이유는 클래스 생성시 id에 private을 사용하였기 때문에 접근할 수 없다는 오류입니다.
이번에는 private이 아닌 protected로 바꾸고 위의 예제를 다시 적용해보겠습니다. protected는 자식 클래스의 내부에서만 접근 가능하다고 알고 있습니다.
다음으로 Site를 상속 받아 새로운 FavoriteSite 클래스를 생성해보도록 하겠습니다. 테스트를 위해서 Site 클래스는 내부에 id, color를 각각 protected와 public으로 선언하였죠.
위와 같이 코드를 작성하고 실행하면 에러 없이 잘 동작하게 됩니다. 즉 private과 달리 protected는 자식 클래스 내부에서 사용되어도 에러가 발생하지 않음을 확인하였습니다.
이번 예제 역시 Site클래스를 상속 받은 WebisfreeSite 자식 클래스를 만듭니다. 다만 위와는 다르게 클래스 내부가 아닌 클래스 밖 외부에서 사용하면 어떻게 될까요? 아래 예제와 같이 코드를 작성하였습니다.
코드를 동작시키면 에러가 발생합니다. 이유는 자식 클래스의 내부가 아닌 외부에서 접근했기 때문입니다. 즉 protected는 자식의 클래스 안에서만 허용이 가능하며 자식 클래스라도 클래스 밖에서 접근하면 동일하게 에러가 발생합니다.
여기까지 클래스의 상속과 접근제한자 사용 방법에 대하여 간략하게 알아보았습니다. 타입스크립트를 사용하지 않는 자바스크립트는 타입을 자동으로 추론하여 선언되어 특별한 타입 선언이 필요하지 않은 언어입니다. 이는 편리하다는 장점도 있지만 타입 불일치에 따른 에러 등 단점들도 공존하고 있었죠. 타입스크립트를 하나씩 알아두면 에러를 줄이고 좀 더 테스트에 효과적인 코드를 작성할 수 있을 것 입니다.
1. 타입스크립트 클래스를 확장하기, extends
2. 타입스크립트 접근 제한자 사용 방법
클래스 상속하기
먼저 클래스를 상속하여 사용하는 방법을 알아봅니다. 방법을 얘기하기에 앞서 클래스는 객체 지향 언어의 핵심인 부분 중 하나입니다. 클래스를 매번 새롭게 만들수도 있지만 이미 만들어진 클래스를 상속 받아 사용할 수 있습니다. 이 경우 상속 받은 클래스는 자식 클래스가 되고 상속한 클래스는 부모 클래스라고 부르게 되죠.
@ 클래스를 상속하는 이유는?
클래스를 상속 받으면 매 번 새로운 클래스를 선언하지 않아도 됩니다. 또한 클래스의 타입 선언 역시 부모 타입을 상속 받아 확장하여 사용할 수 있기 때문에 반복된 코드를 줄일 수 있으며 결국 코드의 재사용성이 올라가게 됩니다. 코드 자체가 간결해지면서 유지보수도 용이할 수 있습니다.
이제 상속의 이유를 알았으니 아래에서 직접 클래스를 하나 만들고 상속 받는 과정을 알아보겠습니다.
클래스 상속 방법 및 예제보기, extends
클래스를 상속하려면 extends 키워드를 사용합니다. extends는 상속을 통해 새로운 자식 클래스를 선언하는 방법입니다. 예를들어 아래와 같이 extends를 사용하면 기존의 클래스 Site를 상속받아 새로운 FavoriteSite 이름의 클래스를 생성할 수 있습니다.
class FavoriteSite extends Site {
// Site에서 새로운 FavoriteSite 자식 클래스를 선언
}
// Site에서 새로운 FavoriteSite 자식 클래스를 선언
}
이제 FavoriteSite는 부모 클래스 Site의 자식 클래스가 되었습니다. 상속을 통해 부모가 가진 모든 프로퍼티나 메소드를 사용할 수 있습니다.
궁금 1) 부모 클래스의 메서드의 오버라이딩(Overriding)이 가능할까?
참고로 자식 클래스는 상속 받은 부모 클래스의 메서드의 오버라이딩(Overriding)이 가능할까요? 당연히 가능합니다. 상속을 통해 전달 받은 메서드는 원한다면 다시 재정의할 수 있습니다.
궁금 2) 여러 개의 부모 클래스를 동시에 상속 받을 수 있을까?
결론부터 얘기하면 아닙니다! 즉, 클래스는 단 하나의 클래스만 상속 받아 사용할 수 있습니다. 동시에 여러 클래스를 상속할 수 없죠. 예를들어 만약 아래와 같이 Site와 Favorite 클래스 모두를 상속 받기 위해서 사용할 경우 에러가 발생하게 됩니다.
class FavoriteSite extends Site, Favorite {
}
// 아래와 같이 에러 발생
Classes can only extend a single class
}
// 아래와 같이 에러 발생
Classes can only extend a single class
에러를 보니 클래스는 오직 하나의 단일 클래스 상속만 가능하다는 메시지를 보여줍니다.
다음은 클래스의 접근 제한자에 대하여 알아봅니다.
클래스에서 접근 제한자 사용하는 방법 알아보기
다음으로 클래스에서 접근 제한자를 사용하는 방법입니다. 접근제한자는 말 그대로 접근을 허용하거나 불허하는 기능을 얘기합니다. 클래스를 선언할 때 사용 목적에 따라 적절하게 접근을 제한하는 것이 가능하며 이를 통해 오류 발생이나 보안 문제 등을 피할 수 있습니다.
클래스에서 접근제한자 public, private, protected 사용하기
타입스크립트의 클래스는 다음과 같이 public, private, protected 세 가지의 접근제한자를 사용할 수 있으며 이는 ES 6의 클래스와의 큰 차이점입니다. 각각 다음과 같이 사용됩니다.
public // (기본값) 공개
private // 비공개로 자기 자신의 클래스 내부에서만 접근
protected // 자식 클래스까지만 접근 가능
따로 값을 지정하지 않고 클래스를 선언하는 경우 public인 기본값이 사용됩니다.
예제) private 접근 제한자 사용하여 자식 클래스 상속하기
만약 비공개인 private 접근제한자를 상속받는 새로운 클래스를 만들어봅니다. 이때 id만 private으로 선언하고 나머지 color 프로퍼티는 public으로 선언합니다. 이 경우 아래와 같이 클래스 생성이 가능할 것입니다.
class Site {
private id: string = 'wf';
public color: string = 'blue';
}
private id: string = 'wf';
public color: string = 'blue';
}
생성된 클래스 Site는 public인 color와 private인 id를 가지고 있습니다. 우리는 이미 접근제한자 private은 자기 자신의 내부에서만 접근 가능하다고 알고 있습니다. 만약 아래와 같이 WebisfreeSite 이름의 새로운 인스턴스를 생성한 후 아래와 같이 color와 id값에 접근하면 어떻게 될까요?
// 자식 클래스 WebisfreeSite를 생성
const WebisfreeSite = new Site();
// color와 id 값을 가지는 변수를 각각 선언
const color = WebisfreeSite.color;
const id = WebisfreeSite.id;
const WebisfreeSite = new Site();
// color와 id 값을 가지는 변수를 각각 선언
const color = WebisfreeSite.color;
const id = WebisfreeSite.id;
위와 같이 코드를 작성할 경우 color인 경우에는 잘 동작하지만 id 변수를 선언하는 과정에서 에러가 발생합니다. 이유는 클래스 생성시 id에 private을 사용하였기 때문에 접근할 수 없다는 오류입니다.
예제) 접근제한자 protected를 사용하기
이번에는 private이 아닌 protected로 바꾸고 위의 예제를 다시 적용해보겠습니다. protected는 자식 클래스의 내부에서만 접근 가능하다고 알고 있습니다.
class Site {
protected id: string = 'wf';
public color: string = 'blue';
}
protected id: string = 'wf';
public color: string = 'blue';
}
다음으로 Site를 상속 받아 새로운 FavoriteSite 클래스를 생성해보도록 하겠습니다. 테스트를 위해서 Site 클래스는 내부에 id, color를 각각 protected와 public으로 선언하였죠.
class FavoriteSite extends Site {
FavoriteId = this.id;
FavoriteColor = this.color;
}
FavoriteId = this.id;
FavoriteColor = this.color;
}
위와 같이 코드를 작성하고 실행하면 에러 없이 잘 동작하게 됩니다. 즉 private과 달리 protected는 자식 클래스 내부에서 사용되어도 에러가 발생하지 않음을 확인하였습니다.
protected를 자식 클래스 밖에서 사용하는 경우
이번 예제 역시 Site클래스를 상속 받은 WebisfreeSite 자식 클래스를 만듭니다. 다만 위와는 다르게 클래스 내부가 아닌 클래스 밖 외부에서 사용하면 어떻게 될까요? 아래 예제와 같이 코드를 작성하였습니다.
// 자식 클래스 WebisfreeSite를 생성
const WebisfreeSite = new Site();
// color와 id 값을 가지는 변수를 각각 선언
const color = WebisfreeSite.color;
const id = WebisfreeSite.id;
const WebisfreeSite = new Site();
// color와 id 값을 가지는 변수를 각각 선언
const color = WebisfreeSite.color;
const id = WebisfreeSite.id;
코드를 동작시키면 에러가 발생합니다. 이유는 자식 클래스의 내부가 아닌 외부에서 접근했기 때문입니다. 즉 protected는 자식의 클래스 안에서만 허용이 가능하며 자식 클래스라도 클래스 밖에서 접근하면 동일하게 에러가 발생합니다.
마치면서
여기까지 클래스의 상속과 접근제한자 사용 방법에 대하여 간략하게 알아보았습니다. 타입스크립트를 사용하지 않는 자바스크립트는 타입을 자동으로 추론하여 선언되어 특별한 타입 선언이 필요하지 않은 언어입니다. 이는 편리하다는 장점도 있지만 타입 불일치에 따른 에러 등 단점들도 공존하고 있었죠. 타입스크립트를 하나씩 알아두면 에러를 줄이고 좀 더 테스트에 효과적인 코드를 작성할 수 있을 것 입니다.
아래의 글도 찾고 계시지 않나요?
